@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.container {
  position: fixed;
  z-index: 1030;
  top: 32px;
  right: 32px;
  left: 104px;
  padding: 8px 0;
  display: flex;
  font-size: 15px;
  line-height: 20px;
  pointer-events: none;
  justify-content: center;

  &.container__with-paywall {
    top: 56px;
  }

  @media (--mobile) {
    top: 0;
    right: 0;
    left: 0;
    background: rgba(246, 246, 246, 0.72);
    animation: slideInFromTop var(--menu-collapse-time) ease-out;

    &.container__with-paywall {
      top: 0;
    }
  }
}

.message {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-right: 8px;
}

.success {
  color: #24d5a1;
}

.failed {
  color: #fc5b67;
}

.retry {
  margin-left: 5px;
  cursor: pointer;
  pointer-events: auto;
  color: var(--pneumatic-color-link);
  transition: color 0.1s ease-in-out;

  &:hover {
    color: var(--pneumatic-color-link-hover);
  }
}
